@use '../variables';
@use '../mixins';

@include mixins.b(drawer) {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  outline: none;
  transition: transform var(--#{variables.$prefix}animation-duration-base) linear;

  @include mixins.m(top) {
    @include mixins.e(content) {
      top: 0;
      left: 0;
      width: 100%;
      border-radius: 0 0 var(--#{variables.$prefix}border-radius) var(--#{variables.$prefix}border-radius);
    }
  }

  @include mixins.m(bottom) {
    @include mixins.e(content) {
      bottom: 0;
      left: 0;
      width: 100%;
      border-radius: var(--#{variables.$prefix}border-radius) var(--#{variables.$prefix}border-radius) 0 0;
    }
  }

  @include mixins.m(left) {
    @include mixins.e(content) {
      top: 0;
      left: 0;
      height: 100%;
      border-radius: 0 var(--#{variables.$prefix}border-radius) var(--#{variables.$prefix}border-radius) 0;
    }
  }

  @include mixins.m(right) {
    @include mixins.e(content) {
      top: 0;
      right: 0;
      height: 100%;
      border-radius: var(--#{variables.$prefix}border-radius) 0 0 var(--#{variables.$prefix}border-radius);
    }
  }

  @include mixins.e(content) {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    background-color: var(--#{variables.$prefix}background-color);
    box-shadow: 0 8px 40px 0 var(--#{variables.$prefix}box-shadow-color);
  }

  @include mixins.e(body) {
    position: relative;
    flex: 1 0 0;
    padding: 20px;
    overflow: hidden auto;
  }

  @include mixins.e(header) {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--#{variables.$prefix}color-divider);
  }

  @include mixins.e(header-title) {
    @include mixins.utils-ellipsis;

    flex: 1 0 0;
    font-size: var(--#{variables.$prefix}font-size-header);
    font-weight: var(--#{variables.$prefix}font-weight-bold);
  }

  @include mixins.e(header-actions) {
    @include mixins.polyfill-column-gap(8px);

    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
  }

  @include mixins.e(footer) {
    @include mixins.polyfill-column-gap(8px);

    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--#{variables.$prefix}color-divider);

    @include mixins.m(left) {
      justify-content: flex-start;
    }

    @include mixins.m(right) {
      justify-content: flex-end;
    }

    @include mixins.m(center) {
      justify-content: center;
    }
  }
}
